<template>
  <view class="tab-content">
    <view
      class="top-bar flexr align-center"
      :style="{
        height: `${sysStore.navBarHeight}px`,
        paddingTop: `${sysStore.statusBarHeight}px`,
      }"
    >
      <view
        class="top-bar-item flexr align-center justify-center"
        :class="{ active: tab == 0 }"
        @click="tab = 0"
      >
        附件门店
      </view>
      <view
        class="top-bar-item flexr align-center justify-center"
        :class="{ active: tab == 1 }"
        @click="tab = 1"
      >
        历史预约记录
      </view>
    </view>
    <scroll-view
      v-if="tab == 0"
      class="scroll-view flex-1"
      :scroll-y="true"
      @scroll="onScroll"
    >
      <view>
        <map
          id="map"
          class="map"
          :latitude="shopStore.latitude"
          :longitude="shopStore.longitude"
          :show-location="true"
        ></map>
        <view
          id="search"
          class="search flexr align-center flex-1 sticky"
        >
          <view class="search-content flex-1 flexr">
            <view class="city flexr align-center" @click="chooseCity">
              <view class="city-name">{{ cityInfo.fullname }}</view>
              <image
                class="drop-down"
                mode="heightFix"
                src="@/static/arrow_down.png"
              ></image>
            </view>
            <input
              class="input"
              placeholder="输入地址匹配附近门店"
              placeholder-style="color: #999999FF;"
              @click="chooseLocation"
            />
          </view>
        </view>
        <view class="shop-list">
          <shop-item
            v-for="(shop, index) in shopStore.nearby"
            :key="index"
            :shop="shop"
          ></shop-item>
        </view>
      </view>
    </scroll-view>
    <view v-if="tab == 1" class="flexr flex-1" :style="{ overflow: 'hidden' }">
      <scroll-view
        v-if="appointStore.historyAppointments.length"
        class="scroll-view flex-1"
        :scroll-y="true"
      >
        <view class="shop-list">
          <shop-item-history
            v-for="(item, index) in appointStore.historyAppointments"
            :key="index"
            :item="item"
          ></shop-item-history>
        </view>
      </scroll-view>
      <view v-else class="flexc flex-1 align-center justify-center">
        <image class="empty-img" src="@/static/empty.png"></image>
        <view class="flexr align-center text-color2">
          您还没预约，赶快去<text class="link" @tap="goNearby">试一试</text>吧？
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
const citySelector = requirePlugin("citySelector");
import { useSysStore } from "@/store/sys.js";
import { useShopStore } from "@/store/shop.js";
import { useAppointmentStore } from "/store/appointment.js";
import { useUserStore } from "@/store/user.js";
import { defineComponent, nextTick, ref, watch, getCurrentInstance } from "vue";
import shopItem from "@/widgets/shopItem.vue";
import shopItemHistory from "@/widgets/shopItemHistory.vue";
import { boundingClientRect } from "@/tools/tools";
import { TX_LOCATION_KEY } from "@/tools/tools";
import { handleShare, handleShareScene } from "@/tools/share";
const sysStore = useSysStore();
const shopStore = useShopStore();
const appointStore = useAppointmentStore();
const userStore = useUserStore();
const tab = ref(0);
// const stickyTop = ref(0);
const scrollTop = ref(0);
// let mapContext = null;

const cityInfo = ref({
  fullname: "深圳市",
  location: {
    latitude: 22.543527,
    longitude: 114.057939,
  },
});

onLoad((options) => {
  console.log("onLoad appointment", options); // 分享邀请在这里读取参数
  const { action, payload, scene, _tab } = options;
  if (action) { // 点击小程序分享卡片进入
    handleShare(action, payload, userStore);
  } else if (scene) {
    // 通过二维码进入
    handleShareScene(scene, userStore);
  }
  tab.value = _tab ? +_tab : 0;
  // nextTick(async () => {
  //   const mapRect = await boundingClientRect("#map");
  //   const searchRect = await boundingClientRect("#search");
  //   stickyTop.value = mapRect.height - searchRect.height / 2;
  //
  //   mapContext = uni.createMapContext("map", getCurrentInstance());
  // });
});
onShow(() => {
  const selectedCity = citySelector.getCity();
  console.log("selectedCity", selectedCity);
  if (selectedCity) {
    cityInfo.value = selectedCity;
  }
});

function onScroll(e) {
  // console.log(e.detail);
  const { scrollTop: st } = e.detail;
  // const map = uni.createSelectorQuery().select('#map')
  // console.log(map)
  scrollTop.value = st;
}

function chooseLocation() {
  const key = TX_LOCATION_KEY; //使用在腾讯位置服务申请的key
  const referer = "GSS客户端"; //调用插件的app的名称
  const location = JSON.stringify(cityInfo.value.location);
  const category = "生活服务,娱乐休闲";
  wx.navigateTo({
    url:
      "plugin://chooseLocation/index?key=" +
      key +
      "&referer=" +
      referer +
      "&location=" +
      location +
      "&category=" +
      category,
  });
}
function chooseCity() {
  const key = TX_LOCATION_KEY; // 使用在腾讯位置服务申请的key
  const referer = "GSS"; // 调用插件的app的名称
  const hotCitys = ""; // 用户自定义的的热门城市

  wx.navigateTo({
    url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
  });
}
watch(tab, (newVal) => {
  if (newVal === 1) {
    if (!userStore.isLogin) {
      // tab.value = 0;
      uni.navigateTo({
        url: "/subpages/account/login",
      });
    } else {
      appointStore.getHistoryAppointments();
    }
  }
});
watch(() => userStore.userInfo, (newVal) => {
  console.log("userInfo", newVal);
  if (userStore.isLogin) {
    appointStore.getHistoryAppointments();
  }
});
function goNearby() {
  console.log("goNearby");
  tab.value = 0;
}
</script>

<style lang="scss">
.tab-content {
  .top-bar {
    box-sizing: border-box;
    padding: 0 20rpx;
    background-color: white;
    .top-bar-item {
      align-self: stretch;
      font-size: 35rpx;
      padding: 0 20rpx;
      color: $text-color2;
      &.active {
        color: $primary-color;
      }
    }
  }
  .scroll-view {
    position: relative;
    overflow-y: scroll;
    .map {
      height: 450rpx;
      width: 100%;
      z-index: -1;
    }
    .search {
      position: sticky;
      top: 0;
      height: 100rpx;
      margin-top: -50rpx;
      // z-index: 100;
      border-top-right-radius: 50rpx;
      border-top-left-radius: 50rpx;
      background-color: white;
      box-sizing: border-box;
      border-bottom: 1px solid $divider-color;
      transition: border-top-right-radius 0.3s, border-top-left-radius 0.3s;
      &.sticky {
        border-top-right-radius: 0rpx;
        border-top-left-radius: 0rpx;
        left: 0;
        right: 0;
        top: 0;
      }
      .search-content {
        background-color: #f3f3f3ff;
        height: 68rpx;
        margin: 0 16rpx;
        border-radius: 34rpx;
        .city {
          height: 100%;
          // background-color: red;
          padding: 0 35rpx;
          border-right: 1px solid white;
          .city-name {
            color: $text-color1;
            // font-size: 32rpx;
          }
          .drop-down {
            height: 15rpx;
            width: 24rpx;
            margin-top: 5rpx;
            margin-left: 30rpx;
          }
        }
        .input {
          flex: 1;
          align-self: stretch;
          height: 100%;
          padding: 0 13rpx;
        }
      }
    }
    .shop-list {
      padding: 18rpx;
      padding-top: 0rpx;
    }
  }
  .empty-img {
    height: 430rpx;
    height: 430rpx;
  }
  .link {
    color: $primary-color;
    padding: 10rpx 5rpx;
  }
}
</style>
